<style>
@import '/pages/family/index.css';
</style>
<template>
	<view class="family-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="user-info">
				<image class="avatar" src="/static/avatar-default.png"></image>
				<text class="welcome">欢迎回来，家属</text>
			</view>
			<view class="search-box">
				<input type="text" placeholder="输入搜索的关键词" />
			</view>
		</view>

		<!-- 主要功能区 -->
		<scroll-view scroll-y class="main-content">
			<!-- 照护指南模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">照护指南</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="function-cards">
					<view class="function-card" @click="navigateTo('/pages/family/careGuide')">
						<image class="card-image" src="/static/care-guide.png"></image>
						<text class="card-title">基础照护</text>
					</view>
					<view class="function-card" @click="navigateTo('/pages/family/communication')">
						<image class="card-image" src="/static/communication.png"></image>
						<text class="card-title">沟通技巧</text>
					</view>
					<view class="function-card" @click="navigateTo('/pages/family/emergency')">
						<image class="card-image" src="/static/emergency.png"></image>
						<text class="card-title">应急处理</text>
					</view>
				</view>
			</view>

			<!-- 五道人生模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">五道人生</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="five-ways-cards">
					<view class="five-ways-card" @click="navigateTo('/pages/family/fiveWays/thanks')">
						<view class="card-icon thanks-icon">谢</view>
						<text class="card-name">道谢</text>
					</view>
					<view class="five-ways-card" @click="navigateTo('/pages/family/fiveWays/sorry')">
						<view class="card-icon sorry-icon">歉</view>
						<text class="card-name">道歉</text>
					</view>
					<view class="five-ways-card" @click="navigateTo('/pages/family/fiveWays/love')">
						<view class="card-icon love-icon">爱</view>
						<text class="card-name">道爱</text>
					</view>
					<view class="five-ways-card" @click="navigateTo('/pages/family/fiveWays/farewell')">
						<view class="card-icon farewell-icon">别</view>
						<text class="card-name">道别</text>
					</view>
					<view class="five-ways-card" @click="navigateTo('/pages/family/fiveWays/wishes')">
						<view class="card-icon wishes-icon">愿</view>
						<text class="card-name">道愿</text>
					</view>
				</view>
			</view>

			<!-- 心理支持模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">心理支持</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="support-cards">
					<view class="support-card" @click="navigateTo('/pages/family/support/selfCare')">
						<image class="support-image" src="/static/self-care.png"></image>
						<text class="support-title">自我照顾</text>
					</view>
					<view class="support-card" @click="navigateTo('/pages/family/support/emotionalRelief')">
						<image class="support-image" src="/static/emotional-relief.png"></image>
						<text class="support-title">情绪疏导</text>
					</view>
					<view class="support-card" @click="navigateTo('/pages/family/support/resources')">
						<image class="support-image" src="/static/resources.png"></image>
						<text class="support-title">资源链接</text>
					</view>
				</view>
			</view>

			<!-- 记忆收集模块 -->
			<view class="module-section">
				<view class="module-header">
					<text class="module-title">记忆收集</text>
					<text class="module-more">更多 ></text>
				</view>
				<view class="memory-cards">
					<view class="memory-card" @click="navigateTo('/pages/family/memory/collection')">
						<image class="memory-image" src="/static/memory-collection.png"></image>
						<text class="memory-title">故事收集</text>
					</view>
					<view class="memory-card" @click="navigateTo('/pages/family/memory/photoAlbum')">
						<image class="memory-image" src="/static/photo-album.png"></image>
						<text class="memory-title">照片相册</text>
					</view>
					<view class="memory-card" @click="navigateTo('/pages/family/memory/voiceRecord')">
						<image class="memory-image" src="/static/voice-record.png"></image>
						<text class="memory-title">语音记录</text>
					</view>
				</view>
			</view>

			<!-- AI助手模块 -->
			<view class="ai-assistant-section" @click="navigateTo('/pages/family/aiChat')">
				<view class="ai-card">
					<view class="ai-icon">🤖</view>
					<view class="ai-info">
						<text class="ai-title">AI智能助手</text>
						<text class="ai-desc">获取照护建议，记录珍贵回忆</text>
					</view>
					<view class="ai-arrow">></view>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item active">
				<view class="tab-icon">🏠</view>
				<text class="tab-text">首页</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/patientStatus')">
				<view class="tab-icon">📊</view>
				<text class="tab-text">患者状态</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/aiChat')">
				<view class="tab-icon">💬</view>
				<text class="tab-text">AI对话</text>
			</view>
			<view class="tab-item" @click="navigateTo('/pages/family/profile')">
				<view class="tab-icon">👤</view>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {

		}
	},
	methods: {
		navigateTo(url) {
			// 判断是否是底部导航栏的页面
			if (url.includes('/pages/family/index') ||
				url.includes('/pages/family/patientStatus') ||
				url.includes('/pages/family/aiChat') ||
				url.includes('/pages/family/profile')) {
				uni.switchTab({
					url: url
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		}
	}
}
</script>